<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">已分配客户</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="inquiry">
      <div class="header">查询订单</div>
      <el-form
        :inline="true"
        ref="form"
        :model="queryForm"
        label-width=""
        size="mini"
      >
        <div class="selectDate">
          <span>时间</span>
          <div class="picker">
            <el-date-picker
              v-model="date"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
              @input="immediUpdate"
            >
            </el-date-picker>
          </div>
        </div>
        <el-form-item label="信息">
          <el-input
            placeholder="请输入客户手机号码/姓名"
            v-model="queryForm.info"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="searchEvent()"
            v-on:keyup.enter="searchEvent"
            >搜索</el-button
          >
          <el-button plain @click="reset" :loading="loading">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <vxe-table :data="tableData.list" style="width: 100%" align="center">
        <vxe-table-column
          type="index"
          title="序号"
          width="100"
        ></vxe-table-column>
        <vxe-table-column
          field="orderNo"
          title="订单号"
          width="100"
          show-overflow
        ></vxe-table-column>
        <vxe-table-column title="客户姓名" show-overflow min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.customerName }}</span>
            <!-- <span v-if='scope.row.isAddCustomer=="Y"' style='color:red'>(此号码已添加客户)</span> -->
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="prodItem"
          title="商品"
          show-overflow
          min-width="200"
        ></vxe-table-column>
        <vxe-table-column scope="scope" title="渠道" min-width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.userDitch"
              placeholder="选择渠道"
              v-if="scope.row.isAddCustomer == 'N'"
            >
              <el-option
                v-for="items in line"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="scope.row.userDitch"
              placeholder="选择渠道"
              v-if="scope.row.isAddCustomer == 'Y'"
            >
              <el-option
                v-for="items in line"
                :key="items.id"
                :label="items.name"
                :value="items.id"
                disabled
              ></el-option>
            </el-select>
          </template>
        </vxe-table-column>
        <vxe-table-column title="客服人员" min-width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.customerUserId"
              placeholder="选择客服"
              v-if="scope.row.isAddCustomer == 'N'"
            >
              <el-option
                v-for="items in customer"
                :key="items.id"
                :label="items.reallyName"
                :value="items.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="scope.row.customerUserId"
              placeholder="选择客服"
              v-if="scope.row.isAddCustomer == 'Y'"
            >
              <el-option
                v-for="items in customer"
                :key="items.id"
                :label="items.reallyName"
                :value="items.id"
                disabled
              ></el-option>
            </el-select>
          </template>
        </vxe-table-column>
        <vxe-table-column title="资源时间" show-overflow min-width="150">
          <template slot-scope="scope">
            <p v-if="!is_null(scope.row.orderTime)">
              {{ scope.row.orderTime }}
            </p>
            <p v-else>--</p>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="sourceFromName"
          title="导入平台"
          width="100"
        ></vxe-table-column>
        <vxe-table-column title="操作" width="120px">
          <template slot-scope="scope">
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="查看"
              placement="top-start"
            > -->
            <p
              class="operation"
              v-if="parArray.indexOf('see') != -1"
              @click="tosee(scope.row)"
            >
              <!-- <img src="../../../assets/see.png" alt="" /> -->
              查看
            </p>
            <!-- </el-tooltip> -->
            <p
              class="operation"
              v-if="parArray.indexOf('see') != -1"
              @click="copyInfo(scope.row)"
            >
              复制
            </p>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum >= 1">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      date: "",
      loading: false,
      queryForm: {
        info: "",
        state: "",
      },
      currentPage1: 1,
      pageSize: 10,
      tableData: [],
      fileList: [],
      line: [],
      customer: [],
      incoming: "",
      limits: "",
      parArray: [],
      height: "500px",
    };
  },
  mounted () {
    let self = this;
    let ph = document.documentElement.clientHeight;
    self.height = ph - 300 + "px";
    window.onresize = function () {
      let ph = document.documentElement.clientHeight;
      self.height = ph - 300 + "px";
    };
  },
  created () {
    this.axiosList("1");
    this.channelAxios();
    this.customerlist();
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "AssignedCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  activated () {
    // this.axiosList("1");
    // this.channelAxios();
    // this.customerlist();
  },
  methods: {
    copyInfo (row) {
      let that = this;
      let inline = this.line.find((res) => res.id == row.userDitch);//渠道
      let info =
        "姓名：" +
        row.customerName +
        "\n" +
        "电话：" +
        row.customerPhone +
        "\n 产品：" +
        row.prodItem +
        "\n" +
        "地址：" +
        row.address +
        "\n 渠道：" +
        inline.name +
        ",\n 资源时间：" +
        /\d{4}-\d{1,2}-\d{1,2}/g.exec(row.orderTime);
      that.$copyText(info).then(
        function (e) {
          that.$message({
            type: "success",
            message: "复制成功",
          });
        },
        function (e) {
          that.$message({
            type: "warning",
            message: "复制失败",
          });
        }
      );
    },

    immediUpdate (e) {
      this.$nextTick(() => {
        if (e == null) {
          this.beginTime = "";
          this.endTime = "";
        } else {
          this.$set(this, "date", [e[0], e[1]]);
        }
      });
    },

    reset: _.debounce(function () {
      this.loading = true;
      this.date = "";
      this.queryForm = {
        info: "",
      };
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.axiosList("1");
    }, 300),

    searchEvent: _.debounce(function () {
      this.currentPage1 = 1;
      // this.pageSize = 10;
      this.axiosList("1");
    }, 300),

    //*** 数据列表 ***//
    axiosList (pageNo) {
      let beginTime = "";
      let endTime = "";
      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + " 00:00:00";
        endTime = this.date[1] + " 23:59:59";
      }
      this.axios
        .post("/order/v1/customer/channel/list", {
          request: {
            assignStatus: 1, //1已分配 2未分配
            endTime: endTime,
            keyWord: this.queryForm.info,
            pageNo: this.currentPage1,
            pageSize: this.pageSize,
            startTime: beginTime,
            status: "A",
          },
          version: "",
        })
        .then((res) => {
          // console.log(res);
          this.loading = false;
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //*** 数据列表 ***//
    //*** 渠道&&客服数据列表 ***//
    channelAxios () {
      this.axios
        .get("/order/comm/customeruser/selectCustomerditch", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.line = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get("/sys/v1/user/employee/by/sales/authority?salesAuthorityId=2", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.customer = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //*** 渠道&客服数据列表 ***//
    /***分配客户***/
    distribution (row) {
      console.log(row.incoming + "---incoming");
      this.axios
        .post(
          "/order/v1/customer/channel/assign",
          {
            request: {
              channel: row.incoming,
              customerServiceId: row.customerUserId,
              id: row.id,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$message.success("分配成功");
            this.axiosList("1");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /***分配客户***/

    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    tosee (row) {
      this.$router.push({
        name: "orderView",
        query: {
          id: row.id,
          name: "assign",
        },
      });
    },
    // 分页
    handleCurrentChange (val) {
      this.currentPage1 = val;
      this.axiosList();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.axiosList();
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
}

.el-form {
  margin-top: 10px;
}

.inquiry {
  background: #fff;
  padding: 10px 10px 0 10px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.import {
  background: #fff;
  width: 100%;
  height: 40px;

  li {
    float: left;
    margin-right: 10px;
  }
}

.table {
  margin: 10px 0;
  margin-bottom: 30px;

  /deep/.el-select .el-input .el-select__caret {
    color: #fff;
    font-size: 14px;
    transition: transform 0.3s;
    cursor: pointer;
  }

  /deep/.el-input_icon {
    height: 35px;
    line-height: 35px;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #55aaff;
    color: #fff;
    height: 35px;

    &::placeholder {
      color: #e8e8e8;
      font-size: 10px;
    }

    &::-webkit-input-placeholder {
      /* WebKit browsers 适配谷歌 */
      color: #fff;
      font-size: 10px;
    }

    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 适配火狐 */
      color: #fff;
      font-size: 10px;
    }

    &::-moz-placeholder {
      /* Mozilla Firefox 19+ 适配火狐 */
      color: #fff;
      font-size: 10px;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+  适配ie*/
      color: #fff;
      font-size: 10px;
    }
  }

  /deep/ .el-button {
    padding: 10px 13px;
  }
}

/deep/.el-table thead {
  color: #2d7edf;
  text-align: center;

  .cell {
    text-align: center;
  }
}

.operation {
  display: inline-block;
  color: #2d7ddf;
  padding: 0 5px;
  img {
    width: 20px;
    height: 20px;
  }
}
.operation:hover {
  cursor: pointer;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  /deep/.el-input--suffix .el-input__inner {
    height: 30px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
